<style scoped lang="less">
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
	}
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	.vipscore{
		margin-left: 100px;
		margin-bottom: 20px;
		display: flex;
		p{
			font-size: 20px;
			font-weight: 800;
			text-align: center;
		}
		div{
			margin-right: 20px;
		}
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
		
	}
	:deep(.el-table .cell){
		display: flex !important;
	}
	.myform{
		margin-top: 20px;
		.characters{
			display: inline-block;
			text-align: right;
			height: 30px;
			line-height: 30px;
			width: 140px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
		}
	}

</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3>会员提现</h3>
			 <el-row style="margin:20px 0 30px 30px">
			 	<el-col :span="10">
			 		  <el-statistic :value="withdraw" title="累计提现(元)"/>
			 	</el-col>
			 	<el-col :span="10">
			 		  <el-statistic :value="withdrawin" title="提现中(元)"/>
			 	</el-col>
			 </el-row>
			 <div class="fomeflex">
			 	<div class="block">
			 		<el-form-item label="申请时间" label-width="90">
						<el-date-picker
							style="width:120px"
							v-model="form.createTimeStart"
							type="date"
							placeholder="开始时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>-
						<el-date-picker
							style="width:120px"
							v-model="form.createTimeEnd"
							type="date"
							placeholder="结束时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
			 		</el-form-item>
			 	  </div>
			 		<el-form-item label="提现单号" label-width="90">
			 			<el-input
							v-model="form.financeCode"
			 			  style="width: 210px;height: 34px;"
			 			  placeholder="请输入提现单号"
			 			/>
			 		</el-form-item>
			 		<el-form-item label="会员信息" label-width="90">
			 			<el-input
						v-model="form.userName"
			 			  style="width: 210px;height: 34px;"
			 			  placeholder="请输入会员名称/手机号"
			 			/>
			 		</el-form-item>
			 	
			 	<el-form-item label="提现方式" label-width="90">
			 		<el-select v-model="form.payMethod" style="width: 210px"  clearable placeholder="全部">
			 			<el-option label="支付宝" value="1" />
			 			<el-option label="微信" value="2" />
			 		</el-select>
			 	</el-form-item>
			 	
			 	<el-form-item label="提现状态" label-width="90">
			 		<el-select v-model="form.financeStatus" style="width: 210px"  clearable placeholder="全部">
			 			<el-option label="待审核" :value="1" />
			 			<el-option label="待转账" :value="2" />
						<el-option label="已转账" :value="3" />
						<el-option label="未通过" :value="4" />
			 		</el-select>
			 	</el-form-item>
			 	<div class="block">
			 		<el-form-item label="审核时间" label-width="90">
						<el-date-picker
							style="width:120px"
							v-model="form.examineTimeStart"
							type="date"
							placeholder="开始时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>-
						<el-date-picker
							style="width:120px"
							v-model="form.examineTimeEnd"
							type="date"
							placeholder="结束时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
			 		</el-form-item>
			 	  </div>
			 	
			 	<div class="block">
			 		<el-form-item label="转账时间" label-width="90">
			 			<el-date-picker
			 				style="width:120px"
			 				v-model="form.lastTimeStart"
			 				type="date"
			 				placeholder="开始时间"
			 				format="YYYY-MM-DD"
			 				value-format="YYYY-MM-DD"
			 			/>-
			 			<el-date-picker
			 				style="width:120px"
			 				v-model="form.lastTimeEnd"
			 				type="date"
			 				placeholder="结束时间"
			 				format="YYYY-MM-DD"
			 				value-format="YYYY-MM-DD"
			 			/>
			 		</el-form-item>
			 	  </div>
			 	
			 	<el-button type="primary" @click="search">搜索</el-button>
			 	<el-button plain @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="38vh">
				 <el-table-column prop="financeCode" label="提现单号" width="120"/>
			 	<el-table-column prop="userId" label="会员信息" width="100"/>
			 	<el-table-column prop="payMethod" label="提现方式" width="120"/>
			 	<el-table-column prop="examineMoney" label="申请提现金额" width="120" />
			 	<el-table-column prop="finalMoney" label="实际转账金额" width="120" />
			 	<el-table-column prop="handlingFees" label="提现手续费" width="120" />
			 	<el-table-column prop="financeStatus" label="提现状态" width="120" />
			 	<el-table-column prop="createTime" label="申请时间" width="120" />
			 	<el-table-column prop="examineTime" label="审核时间" width="120" />
			 	<el-table-column prop="lastTime" label="转账时间" width="120" />
				<el-table-column fixed="right" label="操作" width="180">
				    <template #default="record" style="display: flex;">
						<div v-if="record.row.showExam==1" style="width: 42%;">
							<el-button @click="examSuccess(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">审核成功</el-button>
							<el-button @click="examFailed(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">审核失败</el-button>
						</div>
						<el-button v-if="record.row.showAccount==1" @click="accounts(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">转账</el-button>
				        <el-button link type="primary" @click="detailFn(record.row)" size="small" style="margin-left: 5px;">详情</el-button>
				    </template>
				</el-table-column>
			 </el-table>
			 <el-pagination
			 	layout="prev,pager,next"
			 	:page-count="total"
			 	:page-size="pageSize"
			 	v-model:current-page="pageIndex"	
			 	@current-change="changePage"
			 ></el-pagination>
		 </el-main>
	   </el-container>
	 </div>
	 
	 <!-- 会员提现详情-->
	  <el-dialog
	     v-model="dialogFormVisible"
	     title="提现详情"
	     width="500"
		 align-center
	   >
	    <div class="myform">
	    	<div>
	    		<span class="characters">会员名称</span>
	    		<span class="record">{{formData.userId}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">会员账户</span>
	    		<span class="record"></span>
	    	</div>
	    	<div>
	    		<span class="characters">提现方式</span>
	    		<span class="record">{{formData.payMethod}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">申请提现金额</span>
	    		<span class="record">{{formData.examineMoney}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">提现手续费</span>
	    		<span class="record">{{formData.handlingFees}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">实际转账金额</span>
	    		<span class="record">{{formData.finalMoney}}</span>
	    	</div>
			<div>
				<span class="characters">提现状态</span>
				<span class="record">{{formData.financeStatus}}</span>
			</div>
	    </div>
	     <template #footer>
	       <div class="dialog-footer">
	         <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
	       </div>
	     </template>
	   </el-dialog>
	   <!-- 转账 -->
	    <el-dialog
	       v-model="dialogVisible2"
	       title="转账"
	       width="500"
		   align-center
	     >
	       <span>是否确认转账</span>
	       <template #footer>
	         <div class="dialog-footer">
	           <el-button @click="dialogVisible2 = false">取消</el-button>
	           <el-button type="primary" @click="defineAccounts">
	             确定
	           </el-button>
	         </div>
	       </template>
	     </el-dialog>
		<!-- 审核失败 -->
		<el-dialog
			v-model="dialogVisible3"
			title="拒绝审核"
			width="500"
			align-center
		>
			<div class="myform" style="margin-bottom: 30px;">
				<span class="characters" style="margin-left: -30px;">拒绝理由</span>
				<el-input
					class="record"
					v-model="textarea"
					style="width: 240px;"
					:rows="2"
					type="textarea"
					placeholder="请输入拒绝理由"
				  />
			</div>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible3 = false">取消</el-button>
		        <el-button type="primary" @click="defineFailed">
		          确定
		        </el-button>
		      </div>
		    </template>
		</el-dialog>
		<!-- 审核成功 -->
		 <el-dialog
		    v-model="dialogVisible4"
		    title="审核成功"
		    width="500"
			align-center
		  >
		    <span>是否确认通过审核</span>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible4 = false">取消</el-button>
		        <el-button type="primary" @click="defineSuccess">
		          确定
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { onMounted, ref, reactive} from 'vue';
import {WithdrawalList,WithdrawalAccount,WithdrawalExam} from "@/api"
import { ElMessage } from 'element-plus'

let total=ref(1);
let pageIndex=ref(1);
let pageSize=5;
let dialogFormVisible = ref(false)
let dialogVisible2 = ref(false)
let dialogVisible3 = ref(false)
let dialogVisible4 = ref(false)

const tableData = ref([])
var withdraw=ref(1);
var withdrawin=ref(1);
	const vipwithddrawal=async ()=>{
		let res=await WithdrawalList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("会员提现列表",res)
		tableData.value=res.userList
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].financeStatus=="待审核"){
				tableData.value[i].showExam=1
				tableData.value[i].showAccount=0
			}else if(tableData.value[i].financeStatus=="待转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=1
			}else if(tableData.value[i].financeStatus=="未通过" || tableData.value[i].financeStatus=="已转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=0
			}
		}
		// console.log(tableData)
		total.value=res.pageCount
		withdraw.value=res.had
		withdrawin.value=res.in
	}
	
	
	var failedid;
	var successid;
	var accountsid;
	// 审核失败
	const examFailed=(item)=>{
		dialogVisible3.value=true
		failedid=item
	}
	// 确认审核失败
	const defineFailed=async()=>{
		let res=await WithdrawalExam({
			financeId:failedid,
			financeStatus:0
		})
		// console.log("审核失败结果",res)
		dialogVisible3.value=false
		if(res==null){
			ElMessage.success("审核成功")
		}
		vipwithddrawal()
	}
	
	// 审核成功
	const examSuccess=(item)=>{
		dialogVisible4.value=true
		successid=item
	}
	// 确认审核成功
	const defineSuccess=async()=>{
		let res=await WithdrawalExam({
			financeId:successid,
			financeStatus:1
		})
		// console.log("审核成功结果",res)
		dialogVisible4.value=false
		if(res==null){
			ElMessage.success("审核成功")
		}
		vipwithddrawal()
	}
	
	// 转账
	const accounts=(item)=>{
		dialogVisible2.value=true
		accountsid=item
	}
	// 确认转账
	const defineAccounts=async()=>{
		let res=await WithdrawalAccount({
			financeId:accountsid
		})
		// console.log("转账结果",res)
		dialogVisible2.value=false
		if(res==null){
			ElMessage.success("转账成功")
		}
		vipwithddrawal()
	}

	// 详情	
	let formData=reactive()
	const detailFn=(detail)=>{
		formData=detail
		// console.log("formData",formData)
		dialogFormVisible.value=true
	}
	
	// 搜索
	let form = reactive({
		pageIndex:pageIndex,
		pageSize:pageSize,
		siteId:1,
		financeCode:"",
		payMethod:"",
		financeStatus:"",
		createTimeStart:"",
		createTimeEnd:'',
		examineTimeStart:"",
		examineTimeEnd:"",
		lastTimeStart:"",
		lastTimeEnd:"",
		userName:""
	})
	const search=async()=>{
		let data={}
		for(var i in form){
			if(form[i]!==""){
				data[i]=form[i]
			}
		}
		Object.assign(form,data)
		// console.log("搜索",form)
		let res= await WithdrawalList(form)
		// console.log("搜索",res)
		tableData.value=res.userList
		total.value=res.pageCount
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].financeStatus=="待审核"){
				tableData.value[i].showExam=1
				tableData.value[i].showAccount=0
			}else if(tableData.value[i].financeStatus=="待转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=1
			}else if(tableData.value[i].financeStatus=="未通过" || tableData.value[i].financeStatus=="已转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=0
			}
		}
		// console.log("form",form)
	}
	
	// 点击分页
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		search()
	}
	
	// 重置
	const reset=()=>{
		form.payMethod=""
		form.financeStatus=""
		form.createTimeStart=""
		form.createTimeEnd=""
		form.financeCode=""
		form.payMethod=""
		form.userName=""
		form.examineTimeStart=""
		form.examineTimeEnd=""
		form.lastTimeStart=""
		form.lastTimeEnd=""
		vipwithddrawal()
	}
const options1 = [
  {
    value: '1',
    label: '支付宝'
  },
  {
    value: '2',
    label: '微信'
  },
]

onMounted(()=>{
	vipwithddrawal()
	
})
</script>
